define(function(require, exports, module) {

  var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('underscore');
  var jsonview = require('jsonview');
  var tmpl = require('text!../tmpl.html');

  function main() {
    var $app = $('<div id="app">');
    $('#main').html($app);

    $app.append(tmpl);

    var canvasWidth = 800;
    var canvasHeight = canvasWidth;

    var canvas = document.getElementById('brush');

    var context = canvas.getContext('2d');

    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    drawGrid();

    var isMouseDown = false;
    var lastLoc = {
      x: 0,
      y: 0
    };
    var lastTimestamp = 0;

    canvas.onmousedown = function(e) {
      e.preventDefault();



      isMouseDown = true;
      var loc = windowToCanvas(e.clientX, e.clientY);
      lastLoc = loc;
    }

    canvas.onmouseup = function(e) {
      e.preventDefault();

      isMouseDown = false;
    }

    canvas.onmouseout = function(e) {
      e.preventDefault();

      isMouseDown = false;
    }

    canvas.onmousemove = function(e) {
      e.preventDefault();

      if (isMouseDown === true) {
        //draw
        var curLoc = windowToCanvas(e.clientX, e.clientY);

        var curTimestamp = new Date().getTime();

        var s = calcDistance(curLoc, lastLoc);
        var t = curTimestamp - lastTimestamp;

        var lineWidth = calcLineWidth(t, s);


        drawLine(context, lastLoc.x, lastLoc.y, curLoc.x, curLoc.y, 30);
        lastLoc = curLoc;
        lastTimestamp = curTimestamp;
      }
    }

    function calcLineWidth(t,s) {

    }

    function calcDistance(curLoc, lastLoc) {
      var xdif = curLoc.x-lastLoc.x;
      var ydif = curLoc.y-lastLoc.y;
      return Math.sqrt(xdif*xdif + ydif*ydif);
    }

    function windowToCanvas(x, y) {
      var bbox = canvas.getBoundingClientRect();
      return {
        x: Math.round(x - bbox.left),
        y: Math.round(y - bbox.top)
      }
    }

    function drawGrid() {
      context.save();

      context.strokeStyle = 'rgb(230,11,9)';
      context.beginPath();
      context.moveTo(3, 3);
      context.lineTo(canvasWidth - 3, 3);
      context.lineTo(canvasWidth - 3, canvasHeight - 3);
      context.lineTo(3, canvasHeight - 3);
      context.closePath();

      context.lineWidth = 6;
      context.stroke();

      context.beginPath();

      drawDashLine(context, 0, 0, canvasWidth, canvasHeight);
      drawDashLine(context, canvasWidth, 0, 0, canvasHeight);
      drawDashLine(context, canvasWidth / 2, 0, canvasWidth / 2, canvasHeight);
      drawDashLine(context, 0, canvasHeight / 2, canvasWidth, canvasHeight / 2);

      context.lineWidth = 1;
      context.stroke();
      context.restore();
    }

    function drawLine(ctx, x1, y1, x2, y2, lineWidth) {
      ctx.save();

      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.closePath();
      ctx.lineWidth = lineWidth || 1;
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';
      ctx.strokeStyle = '#000';
      ctx.stroke();
      ctx.restore();
    }

    function drawDashLine(ctx, x1, y1, x2, y2, dashLength) {
      var dashLen = dashLength === undefined ? 5 : dashLength,
        xpos = x2 - x1, //得到横向的宽度;
        ypos = y2 - y1, //得到纵向的高度;
        numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen);
      //利用正切获取斜边的长度除以虚线长度，得到要分为多少段;
      for (var i = 0; i < numDashes; i++) {
        if (i % 2 === 0) {
          ctx.moveTo(x1 + (xpos / numDashes) * i, y1 + (ypos / numDashes) * i);
          //有了横向宽度和多少段，得出每一段是多长，起点 + 每段长度 * i = 要绘制的起点；
        } else {
          ctx.lineTo(x1 + (xpos / numDashes) * i, y1 + (ypos / numDashes) * i);
        }
      }
    }
  }

  return main;
})
